<template>
  <div class="chart" :id="id" width="400px"></div>
</template>

<script>
import mixins from '@/utils/mixins'
export default {
  name: "bar",
  mixins: [mixins],
  props: {
    id: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    xAxisData: {
      type: Array,
      default: () => [],
    },
    seriesData: {
      type: Array,
      default: () => [],
    },
  },
  data(){
    return{
    }
  },
  computed: {
    getOption() {
      let option = {
        color: "#FECE2F",
        title: {
          text: this.title,
          textStyle: {
            fontSize: (this.title=='推文类型' || this.title=='推文语言')?14:18,
            color: "#eee",
          },
        },
        tooltip: {
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.xAxisData,
          axisLabel: {
            color: "#B8BECC",
            interval:0,
            rotate:0,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          max: function(value) {
            return value.max + 20;
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#24282E",
            },
          },
          axisLabel: {
            color: "#B8BECC",
          },
        },
        series: [
          {
            type: "bar",
            data: this.seriesData,
            barWidth: 14,
            barCategoryGap:20,
          },
        ],
        dataZoom: [
          {
            type: "slider", //有单独的滑动条，用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示
            show: true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
            start: 0, //数据窗口范围的起始百分比0-100
            end: this.xAxisData.length>7?20:100, //数据窗口范围的结束百分比0-100
            startValue:0,
            endValue:100,   
            bottom: 0, //距离底部的距离
            height:10,
            borderColor: "#2B2C33",
            fillerColor: "#40424D",
            backgroundColor: "#2B2C33", //两边未选中的滑动条区域的颜色
            showDataShadow: false,
            filterMode: 'filter',
            handleSize:'0%',
            handleStyle: {
              borderRadius: "20",
            },
            textStyle:{
              color:'#2B2C33'
            }
          }
        ],
      };

      return option;
    },
  },
  mounted() {
    const options = this.getOption;
    if (options) {
      this.myCharts = this.$echarts.init(document.getElementById(this.id));
      this.myCharts.setOption(options);
      this.handleResize(this.myCharts);
    }
  },
  updated(){
    
  },
  beforeDestroy() {
    this.myCharts.clear();
  },
  watch: {
    getOption: {
      handler: function(nval) {
        this.myCharts.setOption(nval);
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.chart {
  width: 400px;
  height: 350px;
}
</style>
